<template>
  <div class="body">
    <div class="card" v-for="(item, index) in goods" :key="index">
      <div class="left">
        <div class="goods">商品名称：{{ item.goodsName }}</div>
        <div class="goods">商品编号：{{ item.goodsNum }}</div>
        <div class="goods details">查看详情></div>
      </div>
      <div class="right">
        <img :src="item.imgUrl" class="img" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

const goods = reactive([
  {
    goodsName: '土豆丝炒姜丝',
    goodsNum: 114514,
    imgUrl: 'https://www.helloimg.com/i/2025/01/17/678a56b5c036c.jpg'
  },
  {
    goodsName: '姜丝炒土豆丝',
    goodsNum: 1919810,
    imgUrl: 'https://www.helloimg.com/i/2025/01/17/678a635abe630.jpg'
  },
  {
    goodsName: '姜丝炒姜丝',
    goodsNum: 114514,
    imgUrl: 'https://www.helloimg.com/i/2025/01/17/678a6d1ea52a9.jpg'
  },
  {
    goodsName: '姜丝炒土豆丝',
    goodsNum: 1919810,
    imgUrl: 'https://www.helloimg.com/i/2025/01/17/678a635abe630.jpg'
  },
  {
    goodsName: '土豆丝炒姜丝',
    goodsNum: 114514,
    imgUrl: 'https://www.helloimg.com/i/2025/01/17/678a56b5c036c.jpg'
  },
  {
    goodsName: '姜丝炒土豆丝',
    goodsNum: 1919810,
    imgUrl: 'https://www.helloimg.com/i/2025/01/17/678a635abe630.jpg'
  },
  {
    goodsName: '土豆丝炒姜丝',
    goodsNum: 114514,
    imgUrl: 'https://www.helloimg.com/i/2025/01/17/678a56b5c036c.jpg'
  },
  {
    goodsName: '姜丝炒土豆丝',
    goodsNum: 1919810,
    imgUrl: 'https://www.helloimg.com/i/2025/01/17/678a635abe630.jpg'
  }
])
</script>

<style scoped>
.body {
  width: 100vw;
  min-height: 100vh;
  background-color: #f3f3f3;
  padding: 5%;
}
.card {
  background-color: #fff;
  width: 660rpx;
  height: 230rpx;
  margin: 0 auto 50rpx;
  border-radius: 20rpx;
  box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.2);
}
.left {
  float: left;
  width: 450rpx;
}
.goods {
  margin-left: 20rpx;
  font-size: 30rpx;
  padding: 4%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.details {
  font-size: 32rpx;
  color: gray;
}
.right {
  margin: 25rpx 20rpx 0 0;
  float: right;
  width: 180rpx;
  height: 180rpx;
}
.img {
  width: 180rpx;
  height: 180rpx;
}
</style>
